.generic-dropper-wrapper {
  position: relative;
  z-index: @z-index-level-4;
  min-height: 50px;

  &--active {
    z-index: @z-index-level-5;
  }
}

.generic-dropper {
  position: absolute;
  width: 100%;
  z-index: @z-index-level-14;

  &__actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid @mid-grey;
    overflow: hidden;

    * {
      color: @dark-grey;
      background-color: @lightest-grey;
    }

    .generic-dropper__primary {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      margin: auto;
      height: inherit;

      /* stylelint-disable max-nesting-depth */
      button {
        border: none;
        cursor: pointer;
        font-size: 1rem;
        height: 100%;
        width: 100%;
      }
      /* stylelint-enable max-nesting-depth */
    }
    .generic-dropper__dropclick {
      border-left: 1px solid @lighter-grey;
      text-decoration: none;
      height: inherit;
      width: 40px;

      .display-flex();
      justify-content: center;
      align-items: center;

      /* stylelint-disable max-nesting-depth */
      h3 {
        flex: 1;
      }

      .arrow {
        width: 23px;
        height: 23px;
        background-image: url(/images/icons/icon_dropit.png);
        background-repeat: no-repeat;
        filter: grayscale(100%);
        background-position: 0 0;
        background-size: 45px;

        /* stylelint-disable selector-max-specificity */
        &.up {
          background-position: -22px 0;
        }
        /* stylelint-enable max-nesting-depth */
        /* stylelint-enable selector-max-specificity */
      }
    }
  }
  &__dropdown {
    display: none;
    width: 100%;
    border-top: 1px solid @lighter-grey;
    position: absolute;
  }
}
.book-progress-btn {
  overflow: hidden;
  text-overflow: ellipsis;
}
